<template>
<div class='myInfo'>
    <div class='nav'>
        <div class='back'></div>
        <p>验证身份信息</p>
    </div>
    <!-- 我的车辆信息 -->
    <div class='info' v-if='cardOrPolicyShow'>
        <div class='cardinfo'>
          <div class='infoTitle'>
            <img src="~@/assets/images/myInfo/info_car.png" alt="">
            <strong>车牌号验证</strong>
          </div>
          <div  class='infoText'>为了保障您的信息安全，我们需要您补充在我司投保的车牌号，用以核实您的身份。 </div>
        </div>
        <div class='cardNum' :class='isNewNnergyCar?"newNnergyCar":""'>
          <div class="cardNumIn">
            <span class='cardNumText'>{{carNumNew}}</span>
              <input type='tel' class='cardNumBorder' maxlength="1" v-model='carNumNew1'/>
               <input type='tel' class='cardNumBorder' maxlength="1" v-model='carNumNew2'/>
          </div>
        </div>
        <div class='policySumbitBtn'>
          <van-button round block type="info" native-type="submit" @click='carSumbit'>提交验证</van-button>
        </div>
    </div>
     <!-- 我的保单 -->
     <div v-else>
       <div class='policyInfo'>
          <div class='infoTitle'>
              <img src="~@/assets/images/myInfo/info_phone.png" alt="">
              <strong>保单号验证</strong>
          </div>
          <div  class='infoText'>为了保障您的信息安全，我们需要您补充在我司投保的保单号，用以核实您的身份。 </div>
          <div class='infoTitle' style='margin-top:37px'>
              <img src="~@/assets/images/myInfo/info_policy.png" alt="">
              <strong>保单号</strong>
          </div>
          <div class='policyInfoNum'>
            {{policyNumNew}}
            <input type='tel' maxlength="1" v-model='policynum1'/>
            <input type='tel' maxlength="1" v-model='policynum2'/>
             {{policyNumLast}}
            </div>
        </div>
         <div class='policySumbitBtn'>
          <van-button round block type="info" native-type="submit"  @click='policySumbit'>提交验证</van-button>
        </div>
     </div>
</div>

</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/button/style';
import 'vant/lib/dialog/style';
import { Button,Dialog  } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
@Component({
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
  },
})
export default class MainPage extends Vue {
  userDate: any = '';
  cardOrPolicyShow: boolean =true;//页面为 保单false还是车辆信息true
  isNewNnergyCar: boolean =false;//是否为新能源车true 普通车为false
  secondYZValue:any=''// 0 或 1
  carNumSource:any = '';//车牌号
  carNumNew:string = '';
  carNumNewValue:string = '';
  carNumNew1:string = '';
  carNumNew2:string = '';

  policyNumSource:any = '';
  policyNumLast:string = '';//最后一位
  policyNumNew:string = '';
  policyNumNewValue:string = '';
  policynum1: string = '';
  policynum2: string = '';
  
  carNumAll:any =''
  policyCarAll:any =''
  policyNoCarAll:any =''
  // dataType:any=''
  created() {
   let policyShow = this.$route.query.policyShow;
   let carPolicyNo = this.$route.query.carPolicyNo
   if(policyShow=='policy'){//保单 车险日期 05
    this.policyNumSource = carPolicyNo
    this.cardOrPolicyShow =false//为保单
    // this.dataType='3'

   }else if(policyShow=='noCarPolicy'){//保单 非车险日期
     this.policyNumSource = carPolicyNo
     this.cardOrPolicyShow =false//为保单
    // this.dataType='3'
   }
   else if(policyShow=='newCarPolicy'){//车险 新能源
    this.carNumSource =carPolicyNo 
    this.isNewNnergyCar =true//新能源
    this.cardOrPolicyShow =true//车险
    // this.dataType='2'
   }
   else if(policyShow=='carPolicy'){//车险 普通车
    this.carNumSource =carPolicyNo 
    this.isNewNnergyCar =false//普通车
    this.cardOrPolicyShow =true//车险
    // this.dataType='2'
   }
   //车险
    this.carNumNew =this.carNumSource.substring(0,this.carNumSource.length - 3)+"*";
    this.carNumNewValue =this.carNumSource.substring(0,this.carNumSource.length - 2);
    //保单
    this.policyNumNew = this.policyNumSource.substring(0,2) + "******" + this.policyNumSource.substring(8, this.policyNumSource.length - 3)
    this.policyNumLast = this.policyNumSource.substring(this.policyNumSource.length-1)
    this.policyNumNewValue = this.policyNumSource.substring(0,this.policyNumSource.length-3)
    this.secondYZValue = sessionStorage.getItem("secondYZValue")
  }
  carSumbit(){
    let userData:any=sessionStorage.getItem('userData')
    this.userDate = JSON.parse(userData)
    let carNumNew1 =this.carNumSource.substr(this.carNumSource.length-2,1)//倒数第2位
    let carNumNew2 =this.carNumSource.substr(this.carNumSource.length-1,1)//最后一位
    if(!this.carNumNew1||!this.carNumNew2){
      return Dialog.alert({ title: '温馨提示',message: '请补充完整车牌号号码！'})
    }else if(this.carNumNew1!=carNumNew1||this.carNumNew2!=carNumNew2){
      return Dialog.alert({ title: '温馨提示',message: '请填写正确的车牌号号码！'})
    }
    this.carNumAll =this.carNumNewValue+this.carNumNew1+this.carNumNew2
    // return
    this.InformationSubmit()
  }
  policySumbit(){
    let userData:any=sessionStorage.getItem('userData')
    this.userDate = JSON.parse(userData)
    let policynum1 =this.policyNumSource.substr(this.policyNumSource.length-3,1)//倒数第3位
    let policynum2 =this.policyNumSource.substr(this.policyNumSource.length-2,1)//倒数第2位
    if(!this.policynum1||!this.policynum2){
      return Dialog.alert({ title: '温馨提示',message: '请补充完整您的保单号码！'})
    }else if(this.policynum1!=policynum1||this.policynum2!=policynum2){
      return Dialog.alert({ title: '温馨提示',message: '请填写正确的保单号码！'})
    }
    if(this.$route.query.policyShow=='policy'){
      this.policyCarAll =this.policyNumNewValue+this.policynum1+this.policynum2+this.policyNumLast
    }else{
      this.policyNoCarAll = this.policyNumNewValue+this.policynum1+this.policynum2+this.policyNumLast
    }
    this.InformationSubmit()
  }
  InformationSubmit(){
    if(this.secondYZValue == "1") {
      let data = {
          openId:this.userDate.openId,
          user_id:this.userDate.userId,
          id: this.$route.query.ifId, //新加id,值是从三要素绑定接口获取的id值
          plateNo: this.carNumAll, //车牌号
          carPolicyNo: this.policyCarAll, //无车牌保单
          noCarPolicyNo: this.policyNoCarAll, //非车险保单
          unionid:this.userDate.unionId?this.userDate.unionId:this.userDate.openId, //新加入参uinionId
          datasource: 'zgs',
          // dataType:this.dataType//标识是车牌号2还是保单号3
      }
      let _this = this;
      cloudApi.checkBindWithoutLimit(data).then(function(res: any) {
        console.log("车牌验证接口",res.data)
          if (res.data.resMsg == "1") {
            let routeString:any =_this.$route.query.route
            if(routeString){//从别的跳进来返回
                let route:any = JSON.parse(routeString)
                _this.$router.push(route)
            }else if(sessionStorage.getItem('sourceUrl')){//从小程序来
                let htmlUrl:any =sessionStorage.getItem('sourceUrl')
                wx.miniProgram.redirectTo({ 
                    url: '/pages/webview/webview?url='+encodeURIComponent(htmlUrl)+'&flag=1'
                });
            }else{
              _this.$router.push("personalCard")//名片页
            } 
          }else{
            Dialog.alert({ title: '温馨提示',message: '您输入的号码有误，请重新验证！'})
          }
      });  
    }else{
      let data = {
          openId:this.userDate.openId,
          user_id:this.userDate.userId,
          id: this.$route.query.ifId, //新加id,值是从三要素绑定接口获取的id值
          plateNo: this.carNumAll, //车牌号
          carPolicyNo: this.policyCarAll, //无车牌保单
          noCarPolicyNo: this.policyNoCarAll, //非车险保单
          unionid:this.userDate.unionId?this.userDate.unionId:this.userDate.openId, //新加入参uinionId
          datasource: 'zgs',
          // dataType:this.dataType
      }
      let _this = this;
      cloudApi.checkBindWithLimit(data).then(function(res: any) {
        console.log("车牌验证接口",res.data)
          if (res.data.resMsg == "1") {
            let routeString:any =_this.$route.query.route
            if(routeString){//从别的跳进来返回
                let route:any = JSON.parse(routeString)
                _this.$router.push(route)
            }else if(sessionStorage.getItem('sourceUrl')){//从小程序来
              let htmlUrl:any =sessionStorage.getItem('sourceUrl')
              wx.miniProgram.redirectTo({ 
                  url: '/pages/webview/webview?url='+encodeURIComponent(htmlUrl)+'&flag=1'
              });
            }else{
              _this.$router.push("personalCard")//名片页
            } 
          } else if (res.data.resMsg == "0") {
              if (res.data.wrongAmount >= 10) {
                  Dialog.alert({ title: '温馨提示',message: '您已累计10次验证失败，请前往我的保险模块补充详细信息！'})
              } else {
                  if (res.data.replyCount == "1") {
                    Dialog.alert({ title: '温馨提示',message: '验证信息失败，您还有2次机会，请重新验证！'})
                  } else if (res.data.replyCount == "2") {
                    Dialog.alert({ title: '温馨提示',message: '验证信息失败，您还有1次机会，请重新验证！'})
                  } else {
                    Dialog.alert({
                      title: '温馨提示',
                      message: '尊敬的客户，您的验证机会已用完，请前往我的信息补充信息！',
                    }).then(() => {
                      _this.$router.push({path: 'personalCard'});//名片页
                    });
                  }
              }
          } else if (res.data.resMsg == "7") {//三次机会已用完
            _this.$router.push({path: 'personalCard'});//名片页
          } else {
             Dialog.alert({ title: '温馨提示',message: '暂时不能为您服务。请拨打95519或4008695519'})
          }
      });  
    }
    
  }

}
</script>
<style  lang="less" scoped>
.myInfo{
  background: url("../../assets/images/myInfo/info_center.png") no-repeat;
  background-size:100% 100%;
  // min-height: 100%;
  font-size:16px;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .nav{
        background: url("../../assets/images/myInfo/info_top.png") no-repeat;
        background-size:100% 100%;
        width:100%;
        height:145px;
        text-align: center;
        color:#fff;
        padding-top:50px;
  }
  .cardinfo{
    background: #fff;
    border-radius:20px;
    margin:0 20px;
    padding:13px 20px;
    box-shadow: 1px 5px 5px 1px #efefef;
  }
  .policyInfo{
    margin:0 20px;
    padding:13px 20px;
  }
  .infoTitle{
    margin-bottom:10px;
    img{
      width:25px;
      height:25px;
      vertical-align: middle;
      margin-right:10px;
    }
    strong{
      color:#303030;
    } 
  }
  .infoText{
    color:#8D8D8D;
    font-size:14px;
    line-height: 30px;
  }
  .cardNum{
      background: #fff;
      height: 66px;
      text-align: center;
      margin: 42px 62px;
      padding:1px;
      border-radius: 10px;
      color: #fff;
      font-size: 22.5px;
      text-align: center;
      border: 1px solid #2D5FCB;
      .cardNumIn{
        background: #2D5FCB;
        height: 62px;
        // padding-top: 12px;
        border-radius: 10px;
        .cardNumText{
          letter-spacing: 10px;
          line-height: 62px;
        }
        .cardNumBorder{
          display:inline-block;
          width:31px;
          height: 31px;;
          background: #75A1FF;
          margin:5px;
          text-align: center;
          border-radius:5px;
        }
      }
  }
  .newNnergyCar{
    color: #303030;
    border: 1px solid #00B244;
    .cardNumIn{
       background:linear-gradient(#f7f7f7,#00E262); 
       .cardNumBorder{
        background: #BDF9D7;
       }
    }
  }
  .policyInfoNum{
    line-height: 28px;
    color:#333;
    font-size:13px;
    input{
      display:inline-block;
      width:28px;
      height:28px;;
      background: #FFF;
      border:1px solid #22A088;
      margin:5px;
      text-align: center;
      border-radius:5px;
    }   
  }
  .policySumbitBtn{
    padding:35px;
    .van-button--info{
      height:35px;
      line-height:32px;
      background-color: #22A088;
      border: 0.026667rem solid #22A088;
    }
  }

}
</style>

